import 'package:flutter/material.dart';
import 'package:flutter_dark_mode_demo/provider/theme_setting_provider.dart';
import 'package:flutter_dark_mode_demo/theme/app_theme_mode.dart';
import 'package:provider/provider.dart';

import '../theme/theme_colors.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  /*计数器+1*/
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  /*切换模式*/
  void _changeThemeMode(AppThemeMode value) {
    ThemeSettingProvider provider = Provider.of<ThemeSettingProvider>(context,listen: false);
    provider.mode = value;
  }

  @override
  Widget build(BuildContext context) {
    AppThemeMode curMode = Provider.of<ThemeSettingProvider>(context,listen: false).mode;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          PopupMenuButton(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            offset: const Offset(0, 15),
            elevation: 10,
            tooltip: "切换模式",
            position: PopupMenuPosition.under,
            padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
            initialValue: curMode,
            itemBuilder: (BuildContext context) =>
            <PopupMenuEntry<AppThemeMode>>[
              PopupMenuItem<AppThemeMode>(
                  value: AppThemeMode.light, child: Text(AppThemeMode.light.name)),
              PopupMenuItem<AppThemeMode>(
                  value: AppThemeMode.dark, child: Text(AppThemeMode.dark.name)),
            ],
            onSelected: _changeThemeMode,
            // icon: Icon(Icons.abc),
            child: Icon(Icons.more_vert_rounded,color: AppThemeColor.title.value(context),size: 20,),
          ),
        ],
        backgroundColor: AppThemeColor.bg.value(context),
      ),
      body: Container(
          width: double.infinity,
          color: AppThemeColor.bg.value(context),
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: AppThemeColor.bg.value(context),
            ),
            child: SizedBox.expand(
              child: SingleChildScrollView(
                primary: true,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const SizedBox(height: 25,),
                    const Text(
                      'You have pushed the button this many times:',
                    ),
                    Text(
                      '$_counter',
                      style: Theme.of(context).textTheme.headlineMedium,
                    ),
                    paddingTopWidget(
                      child: Text(
                        "Title",
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 22,
                          color: AppThemeColor.title.value(context)
                        ),
                      )
                    ),
                    paddingTopWidget(
                        child: Text(
                          "Primary Text",
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 20,
                              color: AppThemeColor.primaryText.value(context)
                          ),
                        )
                    ),
                    paddingTopWidget(
                        child: Text(
                          "Second Text",
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18,
                              color: AppThemeColor.secondText.value(context)
                          ),
                        )
                    ),
                    paddingTopWidget(
                        child: Text(
                          "Disable Text",
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18,
                              color: AppThemeColor.disable.value(context)
                          ),
                        )
                    ),
                    Divider(
                      color: AppThemeColor.divide.value(context),
                      indent: 25,
                      endIndent: 25,
                    ),
                    Container(
                      margin: const EdgeInsets.symmetric(horizontal: 25),
                      height: 85,
                      decoration: BoxDecoration(
                        color: AppThemeColor.cellBg.value(context),
                        borderRadius: BorderRadius.circular(15),
                      ),
                      child: Center(
                        child:  Text(
                          "Cell Bg",
                          style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18,
                              color: AppThemeColor.disable.value(context)
                          ),
                        ),
                      ),
                    ),
                    paddingTopWidget(
                      child: Row(
                        children: [
                          const SizedBox(width: 25,),
                          Expanded(
                            flex: 1,
                            child:  Container(
                              height: 55,
                              decoration: BoxDecoration(
                                color: AppThemeColor.red.value(context),
                                borderRadius: BorderRadius.circular(15),
                              ),
                              child: const Center(
                                child: Text(
                                  "Red",
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 18,
                                      color: Colors.white
                                  ),
                                ),
                              ),
                            ),
                          ),
                          const SizedBox(width: 25,),
                          Expanded(
                            flex: 1,
                            child:  Container(
                              height: 55,
                              decoration: BoxDecoration(
                                color: AppThemeColor.blue.value(context),
                                borderRadius: BorderRadius.circular(15),
                              ),
                              child: const Center(
                                child:  Text(
                                  "Blue",
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 18,
                                      color: Colors.white
                                  ),
                                ),
                              ),
                            ),
                          ),
                          const SizedBox(width: 25,),
                        ],
                      )
                    )
                  ],
                ),
              ),
            ),
          ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
  
  Widget paddingTopWidget({required Widget child}) {
    return Padding(
      padding: const EdgeInsets.only(top: 10),
      child: child,
    );
  }
}
